$(function() {
    var SideBar = {
        init: function() {
            this.initSideBar();
            this.initEvent();
            this.initScroll();
        },
        getQuery: function (variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return (false);
        },
        initSideBar: function() {
            var height = $(window).height() - 56;
            $('#sidebar').css('height', height + 'px')
            $('#sidebar ul').css('height', height - 96 - 32 - 28 + 'px');
        },
        initEvent() {
            var self = this;
            $(window).resize(function(){
                self.initSideBar();
            });
            $('.sidebar-category-close').on('click', function() {
                $('.sidebar-category').fadeOut();
            });
            $('.search-category-btn').on('click', function() {
                $('.sidebar-category').fadeToggle();
            });

            $('.search-input').keyup(function(){
                var keyword = $(this).val();
                $.ajax({
                    type : "GET",
                    url : "/web/sidebar",
                    dataType: 'json',
                    data: {
                        keyword: keyword,
                        category_id: SideBar.getQuery('category_id')
                    },
                    success : function(result) {
                        $(".sidebar-nav").mCustomScrollbar('destroy');
                        var list = result.data;
                        nunjucks.configure('/public/view/home', { autoescape: true });
                        var str = nunjucks.render('sidebar.html', { canvas: list, category_id: result.category_id});
                        $('#sidebar .sidebar-nav').html(str);
                        self.initScroll(false);
                    },
                    error : function(e){
                        console.log(e.status);
                        console.log(e.responseText);
                    }
                });
            })

            $('.sidebar-category-box ul li').on('click', function() {
                $(this).toggleClass('active');
                var category_id = [];
                $('.sidebar-category-box ul li.active').each(function() {
                    category_id.push($(this).attr('data-id'));
                })
                $.ajax({
                    type : "GET",
                    url : "/web/sidebar",
                    dataType: 'json',
                    data: {
                        category_id: category_id.join(',')
                    },
                    success : function(result) {
                        $(".sidebar-nav").mCustomScrollbar('destroy');
                        var list = result.data;
                        nunjucks.configure('/public/view/home', { autoescape: true });
                        var str = nunjucks.render('sidebar.html', { canvas: list });
                        $('#sidebar .sidebar-nav').html(str);
                        self.initScroll(false);
                    },
                    error : function(e){
                        console.log(e.status);
                        console.log(e.responseText);
                    }
                });
            })

        },
        initScroll: function(isInit =  true) {
            var scrollTop = 0;
            if (isInit) {
                scrollTop = localStorage.getItem('scroll');
            }
            $(".sidebar-nav").mCustomScrollbar({
                setTop: scrollTop + 'px',
                autoHideScrollbar: true,
                callbacks: {
                    onScroll: function() {
                        localStorage.setItem('scroll', this.mcs.top);
                    }
                }
            });
           // $(".sidebar-nav").mCustomScrollbar("scrollTo", 100);
        }
    }
    SideBar.init();

    // // Load templates from /views
    // nunjucks.configure('/test', { autoescape: true });
    // nunjucks.render('index.html', { foo: 'bar' });
})